<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="page-box">
            <view class="main">
                <view class="custom-cell">
                    <text class="cell-label">收货人</text>
                    <view class="cell-main"><input class="cell-input" type="text" v-model="data.ContactName"
                            placeholder="请填写收货人" /></view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">联系电话</text>
                    <view class="cell-main">
                        <input class="cell-input" type="number" v-model="data.ContactTel" maxlength="11"
                            placeholder="请填写联系电话" />
                    </view>
                </view>
                <view class="custom-cell">
                    <text class="cell-label">配送地址</text>
                    <view class="cell-main" @click="areaSelectFn">
                        <text class="cell-value">{{ regionName }}</text>
                        <uni-icons type="arrowright"></uni-icons>
                    </view>
                </view>
                <view class="custom-cell">
                    <textarea class="cell-textarea" placeholder="请填写详细地址(街道、楼牌号等)"
                        v-model="data.ContactAddress"></textarea>
                    <!-- <uni-icons class="icon-location" type="location-filled" size="48" @click="getLoaction"></uni-icons> -->
                </view>
            </view>
            <view class="card-cell">
                <text class="cell-label">设为默认地址</text>
                <switch class="cell-switch" :color="easyGetColor('red')" :checked="data.IsDefault"
                    @change="change('checked', $event.detail.value)" />
            </view>
            <view class="action-bar">
                <text class="btn btn-success" @click="save">保存地址</text>
                <text class="btn btn-gray" v-if="isEidt" @click="del">删除地址</text>
            </view>
        </view>

        <uni-popup ref="pick" type="dialog">
            <uni-popup-dialog type="text" title="温馨提示" content="确定删除该地址?" :before-close="true" @close="close"
                @confirm="doDel"></uni-popup-dialog>
        </uni-popup>
        <uni-popup ref="areaSelect" type="bottom" background-color="#fff" :safe-area="false">
            <area-select :address-data="data" @pickArea="pickArea"></area-select>
        </uni-popup>
    </view>
</template>

<script>
import searchBar from "@/components/common/search-bar.vue"
import areaSelect from "@/uni-sub-base/components/area-select/area-select.vue"
import inputCell from "@/components/common/cell/input-cell.vue"

import { UpdateUserAddress, DeleteUserAddress } from "@/service/api/user.js"
import { mapbatchSmartParse } from "@/service/api/user.js"
import { getLocation } from "@/uni-sub-base/utils/mapUtil.js"
export default {
    components: {
        searchBar,
        inputCell,
        areaSelect,
    },
    data() {
        return {
            placeholderText: "搜索已有地址",
            searchKey: "",
            data: {
                AddressName: "",
                ContactName: "",
                ContactTel: "",
                ContactAddress: "",
                IsDefault: false,
                ProvinceId: 0,
                ProvinceName: "",
                CityId: 0,
                CityName: "",
                AreaId: 0,
                AreaName: "",
                StreetId: 0,
                StreetName: "",
                Longitude: "",
                Latitude: "",
                ZipCode: null,
            },
            isEidt: false,
            regionName: "请选择省、市、区",
            config: {
                title: "编辑地址",
                centerSlot: true,
                rightSlot: false,
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
        }
    },
    onLoad(e) {
        this.storeUserId = e.storeUserId
        if (e.data) {
            this.data = JSON.parse(decodeURIComponent(e.data))
            this.isEidt = true
            this.getRegionName()
        } else {
            this.config.title = "新增地址"
        }
    },
    mounted() { },
    methods: {
        //设置默认地址
        change(name, value) {
            this.data.isDefault = value
        },
        //保存
        save() {
            //必填值校验
            if (this.data.ContactName.trim() == "") {
                this.easyToast("请填写收货人")
                return
            }
            if (this.data.ContactTel.trim() == "") {
                this.easyToast("请填写联系电话")
                return
            }
            if (this.data.ContactTel.length < 11) {
                this.easyToast("请正确填写联系电话")
                return
            }
            if (this.data.ContactAddress.trim() == "") {
                this.easyToast("请填写详细地址")
                return
            }
            // if (!this.data.Longitude || !this.data.Latitude) {
            //     this.easyToast("请先定位地址")
            //     return
            // }
            let path = "?storeUserId=" + this.storeUserId
            UpdateUserAddress(this.data, path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("提交成功")
                    setTimeout(() => {
                        this.easyGoBack()
                    }, 500)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //删除
        del() {
            this.$refs.pick.open()
        },
        //取消
        close() {
            this.$refs.pick.close()
        },
        //确认删除
        doDel() {
            this.close()
            let path = "?storeUserId=" + this.storeUserId + "&addressId=" + this.data.ID
            DeleteUserAddress({}, path).then((res) => {
                if (res.State == 1) {
                    this.easyToast("删除成功")
                    setTimeout(() => {
                        this.easyGoBack()
                    }, 500)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //选择地区
        areaSelectFn() {
            this.$refs.areaSelect.open()
        },
        //选择地区回调
        pickArea(data) {
            this.$refs.areaSelect.close()
            this.data = Object.assign(this.data, data)
            this.getRegionName()
        },
        getRegionName() {
            let line = "-"
            this.regionName = `${this.data.ProvinceName || ""}-${this.data.CityName || ""}${this.data.AreaName ? line + this.data.AreaName : ""
                }${this.data.StreetName ? line + this.data.StreetName : ""}`
        },
        getLoaction() {
            //#ifdef APP
            uni.navigateTo({
                url: "/pages/map/map-poi",
                events: {
                    getSelectData: (data) => {
                        this.getAppP(data)
                        this.data.Longitude = data.location.longitude
                        this.data.Latitude = data.location.latitude
                        this.data.ContactAddress = data.address.replace(/\\/g, "")
                    },
                },
            })
            //#endif
            //#ifdef H5
            getLocation(
                (res) => {
                    console.log(res)
                    if (res) {
                        this.data.Longitude = res.longitude
                        this.data.Latitude = res.latitude
                        this.data.ContactAddress = res.address.street + res.address.streetNum
                        this.data.ContactAddress = this.data.ContactAddress
                            ? this.data.ContactAddress
                            : "无法识别当前位置"
                        this.getP(res.address)
                    }
                },
                (err) => {
                    console.log(err)
                },
            )
            //#endif
        },
        getP(res) {
            let contactAddress = res.street + res.streetNum
            let item = {
                ContactAddress: contactAddress ? contactAddress : "无法识别当前位置",
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                StreeName: res.street,
                ContactName: this.data.ContactName || "aaa",
                ContactTel: this.data.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        getAppP(res) {
            let item = {
                ContactAddress: res.address,
                ProvinceName: res.province,
                CityName: res.city,
                AreaName: res.district,
                ContactName: this.data.ContactName || "aaa",
                ContactTel: this.data.ContactTel || "13300000000",
            }
            let list = []
            list.push(item)
            let param = {
                list: list,
            }
            this.batchSmartParse(param)
        },
        //智能识别
        batchSmartParse(param) {
            mapbatchSmartParse(param).then((res) => {
                if (res.Data && res.Data.list && res.Data.list.length > 0) {
                    let result = res.Data.list[0]
                    this.data.ProvinceId = result.ProvinceId
                    this.data.ProvinceName = result.ProvinceName
                    this.data.CityId = result.CityId
                    this.data.CityName = result.CityName
                    this.data.AreaId = result.AreaId
                    this.data.AreaName = result.AreaName
                    this.data.StreetId = 0
                    this.data.StreetName = ""
                    this.getRegionName()
                }
            })
        },
    },
}
</script>

<style lang="scss">
.page-box {
    padding: $app-page-padding;
}

.main {
    margin-bottom: 40rpx;
    background: $color-white;
    border-radius: $border-radius-10;
}

.action-bar {
    display: flex;
    flex-direction: column;

    .btn {
        height: 66rpx;
        margin-left: 0;
        margin-bottom: 20rpx;
        font-size: 32rpx;
    }

    .btn-success {
        height: 90rpx;
        background: $app-color-main;
        border-radius: 44rpx;
        font-size: 32rpx;
        color: #ffffff;
    }
}

.custom-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 66rpx;
    padding: $app-page-padding;
    border-bottom: solid 1rpx $uni-bg-color-grey;

    &:last-child {
        border-bottom: 0;
    }

    .cell-label {
        display: flex;
        font-size: 30rpx;
        color: $color-gray-1;
        flex: 1;
    }

    .cell-main {
        display: flex;
        flex: 3;
        overflow: hidden;

        .cell-value {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #323232;
            font-size: $font-size-30;
        }

        .cell-input {
            color: #323232;
            font-size: $font-size-30;
        }
    }

    .cell-textarea {
        height: 160rpx;
        color: #323232;
        font-size: $font-size-30;
    }

    .icon-location {
        padding: $app-page-padding;
        margin-right: -$app-page-padding;
    }
}

.card-cell {
    margin-bottom: 40rpx;

    .cell-label {
        display: flex;
        font-size: 30rpx;
        color: $color-gray-1;
        flex: 1;
    }
}

.cell-switch {
    transform: scale(0.8);
}
</style>
